<template>
  <div>
    <div class="flex-start m-b-10">
      <el-date-picker size="small" v-model="searchDate" type="daterange"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"/>
      <el-input size="small" class="m-l-10 m-r-10" style="width: 300px" placeholder="请输入关键字"
                v-model="search.queryWord"/>
      <el-button size="small" type="primary" icon="el-icon-search" @click="query">查询</el-button>
    </div>
    <el-table :data="data" v-loading="loading" style="width: 100%" border height="350"
              :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column prop="recordCode" label="加注单号" min-width="180"/>
      <el-table-column prop="macCode" label="加注机编号" width="200"/>
      <el-table-column prop="actualWeight" label="实际加注量（kg）" width="180"/>
      <el-table-column prop="moneyFill" label="实际加注金额（元）" width="200"/>
      <el-table-column prop="finishTime" label="加注时间" width="120"/>
    </el-table>
    <app-pagination ref="paginationRef" :total="total" class="m-t-20" @do-query="query"/>
    <div class="dividing-line m-t-30"></div>
    <div class="m-t-30 flex-center">
      <div></div>
      <el-button type="primary" plain @click="hide" v-show="closeBtn">关闭</el-button>
      <div></div>
    </div>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";

import {getRecords, getTotal, isNull} from "@/util/common-util";
import {getPage} from "@/api/business/filling-record-user";

export default {
  name: "filling-record-normal-user-list",
  components: {AppPagination},
  props: ['id','closeBtn'],
  data() {
    return {
      loading: false,
      data: [],
      searchDate: [],
      search: {
        startTime: '',
        endTime: '',
        queryWord: '',
        userId: ''
      },
      total: 0,
    }
  },
  mounted() {
    this.search.userId = this.id
    this.query()
  },
  methods: {
    hide() {
      this.$emit('hide')
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage()
      }
      this.loading = true
      this.search.startTime = this.searchDate[0]
      this.search.endTime = this.searchDate[1]
      this.search.userId = this.id
      getPage(_page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
